<template>
	<view>
		<NavBar text='挂号记录' />
		<view style="background-color: #fff;margin-top: 60px;display: flex;justify-content: space-between;">
			<view v-for="(item,index) in ship" :key='index' style="
			
			width: 100px;height: 41px;border: 1px solid  #d7d7d7;text-align: center;line-height: 41px;background-color: #f6f6f6;border-radius: 10px;margin: 10px;">
				{{item.text}}
			</view>
		</view>
		
		<view style="width: 100%; height: 15rpx;"></view>
		<view class="zstyle">
			<view class="zstyle_" @click="tz" v-for="(item,index) in array" :key='index'>
				<view class="zstyle_name">
					<view>{{item.name}}</view>
					<view style="font-size: 12px;">
						<span style="font-size: 12px;color: #d7d7d7;">预约号:</span>
						{{item.number}}
					</view>
				</view>


				<view class="zstyle_b">
					<view style="width: 100%; height: 20rpx;"></view>
					<view style="display: flex;justify-content: space-between;">
						<view class="zstyle_sj flx1">
							<view>就诊时间：</view>
							<view style="color: black;">{{item.date}}</view>
						</view>
						<view style="background-color: #3ebafe;
							width: 44px;height: 23px;font-size: 12px;color: #fff;
							text-align: center;
							border-radius: 5px;line-height: 23px;">
							{{item.text}}
						</view>
					</view>

					<view class="zstyle_sj flx1">
						<view>就诊医生：</view>
						<view style="color: black;">{{item.ys}}</view>
					</view>
					<view class="zstyle_sj flx1">
						<view>就诊医院：</view>
						<view style="color: black;">{{item.yy}}</view>
					</view>
					<view class="zstyle_sj flx1">
						<view>就诊科室：</view>
						<view style="color: black;">{{item.ks}}</view>
					</view>
					<view style="width: 100%; height: 20rpx;"></view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				radio3: 2,
				ship: [{
					text: '未就诊',
					value: 0
				}, {
					text: '待评论',
					value: 1
				}, {
					text: '历史',
					value: 2
				}],
				array: [{
						name: '张三三',
						number: '10064782462',
						text:'已退款',
						ks: '呼吸内科',
						ys: '张玉萍',
						yy: '浙江大学医学院附属第一医院',
						date: '2021-05-09 15:21',
						status: true
					},
					{
						name: '张三三',
						number: '10064782462',
						ks: '呼吸内科',
						text:'已支付',
						ys: '张玉萍',
						yy: '浙江大学医学院附属第一医院',
						date: '2022-06-09 14:21',
						status: false
					},
					{
						name: '张三三',
						number: '10064782462',
						ks: '呼吸内科',
						text:'已支付',
						ys: '张玉萍',
						yy: '浙江大学医学院附属第一医院',
						date: '2021-04-01 20:00',
						status: false
					},
					{
						name: '张三三',
						number: '10064782462',
						ks: '呼吸内科',
						ys: '张玉萍',
						text:'已支付',
						yy: '浙江大学医学院附属第一医院',
						date: '2023-05-09 13:21',
						status: false
					},
					{
						name: '张三三',
						number: '10064782462',
						ks: '呼吸内科',
						ys: '张玉萍',
						text:'已支付',
						yy: '浙江大学医学院附属第一医院',
						date: '22020-03-08 14:22',
						status: false
					}
				]
			}
		},
		methods: {
			tz() {
				uni.navigateTo({
					url: '/pages/ReportPrescription/ReportDetails'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.zstyle {
		.zstyle_ {
			width: 90%;
			margin: 0 auto;
			border-radius: 30rpx;
			padding: 15rpx;
			background-color: #fff;
			margin-top: 20rpx;
			overflow: hidden;
			box-sizing: border-box;

			.zstyle_name {
				font-size: 32rpx;
				// font-weight: 600;
				line-height: 80rpx;
				border-bottom: solid 1rpx #f5f5f5;
				display: flex;
				justify-content: space-between;
			}

			.zstyle_b {
				border-bottom: solid 1rpx #f5f5f5;

				.zstyle_sj {
					font-size: 28rpx;
					color: #cecece;
				}
			}
		}
	}

	
</style>